Progress Indicator Loading UI
ローディング Loading Progress IndicatorのUI
プログレスインジケータ Progress indicator が一般的に使われてる
自分がLoading UIとして覚えがちなので、Loadingの文字入れてる
種類
見た目で分ける
Linear Indicator UI
Circular indicator UI
Skeleton screen スケルトンスクリーン UI
Ilust indicator UI
アクションでわける
Pulldown progress UI
考慮すること
待機終了のタイプ
見た目、形
配置
状態管理
どんな時に使う
ユーザーの操作制限
待機時間について
TODO ↓後半だれてる
0.1s
瞬時に反応しているように見える限界
1.0s
ユーザーが遅延に気づく限界
思考の途切れが起きる可能性あり
1.0以上は、何かしらの対処必要あり
対処
Progress Indicator必要
10s
IndicatorUIに注目してもらう限界
別サイトに移動したり、利用をやめる
対処
Progress Indicatorの待機終了のタイプが確定
終了時間を示す
予定からずれたり、遅延が発生してる
遅延の状態、ユーザーへの期待を示す
デバイスによる違い
一般的にネット環境、デバイス性能の差がユーザーのメンタルモデルに影響
pc ブラウザ
0.15〜0.2秒の間。
モバイル
アニメーションの長さ
0.2〜0.3秒
by Material Design
個人的
待機状態のUIについて整理してみる(デザイン編)
こちらで詳細にまとめました！
実装編はまたあとで
参考
Progress indicators - Material Design
詳細に議論、記述されている
ローディングを無くす | ゲームUI演出
短いローディングにスピナーを使う | ゲームUI演出
How To Add Loading Indicators to a Vue.js Application | DigitalOcean
Step 4 — Exploring Advanced Usageのaxiosで叩く共通部分にIndicator挟む所がわかりやすい
loading indicator プロパティ - NuxtJS
Nuxt.jsはデフォルトでUIがあるみたい
Understanding loading animations — types and applications | by Yanbin Hao | UX Collective
人間の待機時間に対する意見が良い
Response Time Limits: Article by Jakob Nielsen
Why Perceived Performance Matters, Part 1: The Perception Of Time — Smashing Magazine
Everything you need to know about Loading Animations | by Lisa Dziuba | Flawless iOS | Medium
Loading – Carbon Design System
Progressive Loadingが良かった
Skeleton screen スケルトンスクリーン UIに近しい
When You Need to Show a Button’s Loading State
ボタン Button UIにCircular indicator UIつける話
デザインインスピレーション
10 Creative Loading Indicators. by Nick Babich | by Nick Babich | UX Planet
Loading Indicators. Hey everyone! Here are some samples of… | by Ann Green | Medium